NodeJS のプロジェクトを作りたいので、package.jsonがまだの場合はyarn init -yでpackage.jsonを作っておきます。
依存インストール
次にnextをインストールします。nextはreactとreact-domが共にインストールされていることを期待しているのでその２つもインストールします。
yarn add next react react-dom
設定ファイル作成
🎉next@^9からこのファイルは作成しなくても良くなりました。
next.config.js"Hello from NextJS"
// next.config.js
module.exports = {};
2019年10月以前の内容
というファイルを作ります。とはいっても今はただと表示させたいだけなので設定内容はただの空オブジェクトです。~~ページ作成
NextJS ではsrc/pagesディレクトリに実際のページとなるファイルを作成していきます。src/pages/index.jsxがindex.htmlというような意味になるのでこのファイルを作成しましょう。
// /pages/index.jsx
export default () => Hello from NextJS
ES で書かれていますが、 NextJS は逆に ES でしか書くことができないのでこれで大丈夫です。
ページ確認
./node_modules/.bin/next dev -p 3333と実行しましょう。サーバーが立ち上がり、localhost:3333へアクセスして"Hello from NextJS"と表示されれば大丈夫です。
この結果のリポジトリです。
